<template>
	<div class="main">
		<el-form class="header" size="mini" inline>
			<el-form-item label="账号">
				<el-input
					v-model="formAccount"
					placeholder="请输入账号 "
				></el-input>
			</el-form-item>
			<el-form-item label="姓名">
				<el-input
					v-model="formName"
					placeholder="请输入姓名 "
				></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="search"
					>搜索</el-button
				>
			</el-form-item>
		</el-form>
		<div class="table">
			<el-table
				:data="tableData"
				style="width: 82vw"
				size="mini"
				border
			>
				<el-table-column
					type="index"
					label="序号"
					width="50"
				>
				</el-table-column>
				<el-table-column prop="user_name" label="名字">
				</el-table-column>
				<el-table-column prop="account" label="账号">
				</el-table-column>
				<el-table-column prop="sex" label="性别">
				</el-table-column>
				<el-table-column prop="phone" label="手机号">
				</el-table-column>
				<el-table-column prop="email" label="邮箱">
				</el-table-column>
				<el-table-column>
					<template v-slot="{ row }">
						<el-button
							type="primary"
							@click="edit(row)"
							size="mini"
							>编辑</el-button
						>
						<el-dialog
							title="编辑用户信息"
							:visible.sync="dialogVisible"
							width="50%"
						>
							<el-form
								:model="editForm"
								label-width="100px"
							>
								<el-form-item label="姓名">
									<el-input
										v-model="editForm.user_name"
									></el-input>
								</el-form-item>
								<el-form-item label="账号">
									<el-input
										v-model="editForm.account"
									></el-input>
								</el-form-item>
								<el-form-item label="性别">
									<el-select v-model="editForm.sex">
										<el-option
											label="男"
											value="1"
										></el-option>
										<el-option
											label="女"
											value="0"
										></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="手机号">
									<el-input
										v-model="editForm.phone"
									></el-input>
								</el-form-item>
								<el-form-item label="邮箱">
									<el-input
										v-model="editForm.email"
									></el-input>
								</el-form-item>
							</el-form>
							<span slot="footer">
								<el-button @click="dialogVisible = false"
									>取消</el-button
								>
								<el-button
									type="primary"
									@click="submitEdit"
									>保存</el-button
								>
							</span>
						</el-dialog>
						<el-button
							type="danger"
							@click="del(row)"
							size="mini"
							>删除</el-button
						>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				layout="total, sizes, prev, pager, next, jumper"
				style="text-align: center; margin-top: 20px"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="tableParams.pageNum"
				:page-sizes="pageSizes"
				:page-size="tableParams.pageSize"
				:total="totalCount"
			>
			</el-pagination>
		</div>
	</div>
</template>

<script>
import { get } from '_api/http';
import { post } from '_api/http';
export default {
	data() {
		return {
			formAccount: '',
			formName: '',
			totalCount: 0,
			tableParams: {
				pageNum: 1,
				pageSize: 10,
			},
			pageSizes: [10, 25, 50, 100],
			tableData: [],
			dialogVisible: false,
			editForm: {
				user_name: '',
				account: '',
				sex: '',
				phone: '',
				email: '',
			},
		};
	},
	methods: {
		async edit(row) {
			try {
				this.editForm = { ...row }; // 复制行数据到表单
				console.log(this.editForm);
				this.dialogVisible = true; // 显示对话框
			} catch (error) {
				console.error('编辑失败:', error);
				this.$message.error('编辑失败');
			}
		},
		async del(row) {
			try {
				// 确认删除对话框
				await this.$confirm('确认删除该记录吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				});
				// 调用删除API
				let userId = {
					userId: row.user_id,
				};
				await get('/api/user/delete', userId);
				this.queryDataList();
				this.$message.success('删除成功');
			} catch (error) {
				if (error !== 'cancel') {
					console.error('删除失败:', error);
					this.$message.error('删除失败');
				}
			}
		},
		async submitEdit() {
			try {
				// 调用API提交编辑
				await post('/api/user/update', this.editForm);
				this.$message.success('保存成功');
				this.dialogVisible = false;
				this.queryDataList(); // 刷新数据
			} catch (error) {
				this.$message.error('保存失败');
			}
		},
		search() {
			this.tableParams.pageNum = 1;
			this.queryDataList();
		},
		handleSizeChange(newSize) {
			this.tableParams.pageNum = 1;
			this.tableParams.pageSize = newSize;
			this.queryDataList();
		},
		handleCurrentChange(newPage) {
			this.tableParams.pageNum = newPage;
			this.queryDataList();
		},
		async queryDataList() {
			let account = this.formAccount;
			if (account === '') {
				account = null;
			}
			let name = this.formName;
			if (name === '') {
				name = null;
			}
			let params = {
				pageSize: this.tableParams.pageSize,
				pageNum: this.tableParams.pageNum,
				account,
				name,
			};
			const res = await get('/api/user/list', params);
			this.tableData = res.data.datalist;
			this.totalCount = res.data.totalCount;
		},
	},
	mounted() {
		this.queryDataList();
	},
};
</script>

<style lang="less" scoped>
.main {
	width: 100%;
	margin: 15px auto;
	height: calc(100vh - 30px);
	.header {
		font-size: 15px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f5f7fa;
		padding: 10px;
		border-radius: 4px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}
	.table {
		margin-top: 20px;
		width: 100%;
		overflow: auto;
		background-color: #fff;
		.el-table {
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		}
	}
}
</style>
